<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>流程设计</title>
    <th:block th:include="include :: header('流程设计')" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/oozie/skin1/all.css}" />

    <link rel="stylesheet" type="text/css" th:href="@{/css/oozie/default.css}" />

    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/codemirror/codemirror.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/codemirror/style.css}"/>

    <style type="text/css">
        .title {
            margin-bottom: 10px;
        }

        .dragitem {
            border: 1px solid #ccc;
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
        }

        .targetarea {
            border: 1px solid red;
            height: 150px;
        }

        .proxy {
            border: 1px solid #ccc;
            width: 80px;
            background: #fafafa;
        }
        /* 右键菜单样式 */
        #contextmenu {
            border: 1px solid #aaa;
            border-bottom: 0;
            background: #eee;
            position: absolute;
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
        }

        #contextmenu li a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #aaa;
            cursor: pointer;
        }

        #contextmenu li a:hover {
            background: #fff;
        }
        /*ul  li样式*/
        ul {
            padding: 0px;
            margin: 0px;
        }

        /*  input {
            width: 30px;
        }  */
    </style>
    <style type="text/css">
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        .autocomplete-group {
            padding: 2px 5px;
        }

        .autocomplete-group strong {
            display: block;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
<div data-role="ued-layout" data-rel="isLeftCollapse:'false'">
    <div position="top" class="ued-head clearfix">
        <div class="ued-logo" id="flow"></div>
        <div class="ued-slidebox js_scrollpanel">
            <div class="ued-scrollWrap">
                <ul class="js_scrollList ued-list-2 clearfix" style="padding-top: 10px">
                    <li>
                        <a href="#" onclick="valid();">
                            <i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
                            <span class="block">流程校验</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="lookxml()">
                            <i class="fa fa-code fa-2x" aria-hidden="true"></i>
                            <span class="block">流程hPDL</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="zoomOut()">
                            <i class="fa fa-search-plus fa-2x" aria-hidden="true"></i>
                            <span class="block">视图放大</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="zoomIn()">
                            <i class="fa fa-search-minus fa-2x" aria-hidden="true"></i>
                            <span class="block">视图缩小</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="reduction()">
                            <i class="fa fa-search fa-2x" aria-hidden="true"></i>
                            <span class="block">还原视图</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="bridpic()">
                            <i class="fa fa-eye fa-2x" aria-hidden="true"></i>
                            <span class="block">鸟瞰</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-download fa-2x" aria-hidden="true"></i>
                            <span class="block">流程导入</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" onclick="exportXML();">
                            <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
                            <span class="block">流程导出</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="save();">
                            <i class="fa fa-save fa-2x" aria-hidden="true"></i>
                            <span class="block">保存</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="saveQuit();">
                            <i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
                            <span class="block">保存退出</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="closeDesign();">
                            <i class="fa fa-sign-out fa-2x" aria-hidden="true"></i>
                            <!--<img th:src="@{/images/design/out.png}" alt="" />-->
                            <span class="block">退出</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div position="left" style="left: 0px; top: 86px; position: absolute; width: 140px; height: 584px;">
        <div id="point" class="accordion-group-4" data-role="ued-accordion" data-rel="active:0,height:'fill',header:'h3.accordion-heading',contentBox:'div.accordion-body',collapsible:true">
            <h3 class="accordion-heading on">
                <i class="panel-icon icon-1"></i>
                <a class="accordion-toggle" href="#" hidefocus="true">控制节点</a>
            </h3>
            <div class="accordion-body" style="display: block;">
                <ul class="ued-list">
                    <li type="5">
                        <img style="width: 45px" th:src="@{/images/design/fz/fork.png}" title="fork" />
                        <span>fork</span>
                    </li>
                    <li type="4">
                        <img style="width: 45px" th:src="@{/images/design/fz/choose.png}" title="choose" />
                        <span>choose</span>
                    </li>
                    <li type="6">
                        <img style="width: 45px" th:src="@{/images/design/fz/join.png}" title="join" />
                        <span>join</span>
                    </li>
                    <li type="31">
                        <img style="width: 45px" th:src="@{/images/design/fz/childprocess.png}" title="子流程" />
                        <span>子流程</span>
                    </li>
                </ul>
            </div>
            <h3 class="accordion-heading">
                <i class="panel-icon icon-2"></i>
                <a class="accordion-toggle" href="#" hidefocus="true">动作节点</a>
            </h3>
            <div class="accordion-body" style="display: none">
                <ul class="ued-list">
                    <li type="3">
                        <img style="width: 45px" th:src="@{/images/design/jc/mr.png}" title="mapreduce" />
                        <span>mapreduce</span>
                    </li>
                    <li type="17">
                        <img style="width: 45px" th:src="@{/images/design/kz/spark.png}" title="spark" />
                        <span>spark</span>
                    </li>
                    <li type="1">
                        <img style="width: 45px" th:src="@{/images/design/jc/fs.png}" title="fs" />
                        <span>fs</span>
                    </li>
                    <li type="2">
                        <img style="width: 45px" th:src="@{/images/design/jc/java.png}" title="java" />
                        <span>java</span>
                    </li>
                    <li type="7">
                        <img style="width: 45px" th:src="@{/images/design/kz/email.png}" title="email" />
                        <span>email</span>
                    </li>
                    <li type="13">
                        <img style="width: 45px" th:src="@{/images/design/kz/shell.png}" title="shell" />
                        <span>shell</span>
                    </li>
                    <li type="14">
                        <img style="width: 45px" th:src="@{/images/design/kz/ssh.png}" title="ssh" />
                        <span>ssh</span>
                    </li>
                    <!--<li type="9">-->
                        <!--<img th:src="@{/images/design/kz/hive.png}" title="hive" />-->
                        <!--<span>hive</span>-->
                    <!--</li>-->
                    <li type="15">
                        <img style="width: 45px" th:src="@{/images/design/kz/hive2.png}" title="hive2" />
                        <span>hive2</span>
                    </li>
                    <li type="10">
                        <img style="width: 45px" th:src="@{/images/design/kz/sqoop.png}" title="sqoop" />
                        <span>sqoop</span>
                    </li>
                    <li type="16">
                        <img style="width: 45px" th:src="@{/images/design/kz/distcp.png}" title="distcp" />
                        <span>distcp</span>
                    </li>
                    <li type="12">
                        <img style="width: 45px" th:src="@{/images/design/jc/pig.png}" title="pig" />
                        <span>pig</span>
                    </li>
                </ul>
            </div>
            <h3 class="accordion-heading">
                <i class="panel-icon icon-3"></i>
                <a class="accordion-toggle" href="#" hidefocus="true">扩展节点</a>
            </h3>
            <div class="accordion-body" style="display: none">
                <ul class="ued-list">
                    <li type="8">
                        <img style="width: 45px" th:src="@{/images/design/kz/ftp.png}" title="ftp" />
                        <span>ftp</span>
                    </li>
                    <li type="impala">
                        <img style="width: 45px" th:src="@{/images/design/kz/impala.png}" title="impala" />
                        <span>impala</span>
                    </li>
                    <li type="gbase">
                        <img style="width: 45px" th:src="@{/images/design/kz/gbase.png}" title="gbase" />
                        <span>gbase</span>
                    </li>
                    <li type="33">
                        <img style="width: 45px" th:src="@{/images/design/kz/wash.png}" title="wash" />
                        <span>wash</span>
                    </li>
                    <li type="34">
                        <img style="width: 45px" th:src="@{/images/design/kz/es.png}" title="esload" />
                        <span>esload</span>
                    </li>
                    <li type="18">
                        <img style="width: 45px" th:src="@{/images/design/kz/storm.png}" title="storm" />
                        <span>storm</span>
                    </li>
                    <li type="11">
                        <img style="width: 45px" th:src="@{/images/design/kz/zip.png}" title="zip" />
                        <span>zip</span>
                    </li>
                    <li type="19">
                        <img style="width: 45px" th:src="@{/images/design/kz/encrypt.png}" title="encrypt" />
                        <span>encrypt</span>
                    </li>
                    <li type="20">
                        <img style="width: 45px" th:src="@{/images/design/kz/merge.png}" title="merge" />
                        <span>merge</span>
                    </li>
                    <li type="21">
                        <img style="width: 45px" th:src="@{/images/design/kz/split.png}" title="split" />
                        <span>split</span>
                    </li>
                    <li type="22">
                        <img style="width: 45px" th:src="@{/images/design/kz/sorting.png}" title="sorting" />
                        <span>sorting</span>
                    </li>
                    <li type="23">
                        <img style="width: 45px" th:src="@{/images/design/kz/md5.png}" title="md5" />
                        <span>md5</span>
                    </li>
                    <li type="24">
                        <img style="width: 45px" th:src="@{/images/design/kz/checkfile.png}" title="checkfile" />
                        <span>checkfile</span>
                    </li>
                    <li type="25">
                        <img style="width: 45px" th:src="@{/images/design/kz/webservice.png}" title="webservice" />
                        <span>webservice</span>
                    </li>
                    <li type="26">
                        <img style="width: 45px" th:src="@{/images/design/kz/http.png}" title="http" />
                        <span>http</span>
                    </li>
                    <li type="27">
                        <img style="width: 45px" th:src="@{/images/design/kz/sql.png}" title="sql" />
                        <span>sql</span>
                    </li>
                    <li type="28">
                        <img style="width: 45px" th:src="@{/images/design/kz/load.png}" title="load">
                        <span>load</span>
                    </li>
                    <li type="29">
                        <img style="width: 45px" th:src="@{/images/design/kz/extract.png}" title="extract" />
                        <span>extract</span>
                    </li>
                    <li type="30">
                        <img style="width: 45px" th:src="@{/images/design/kz/procedure.png}" title="procedure" />
                        <span>procedure</span>
                    </li>
                    <li type="32">
                        <img style="width: 45px" th:src="@{/images/design/kz/custom.png}" title="custom" />
                        <span>自定义</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div position="center" class="relative" style="background: #fff; overflow: none;">
        <div class="ued-crumbs">[[${ooziePackageTemplate.nameEn}]]</div>
        <div style="float: left; width: 0px; height: 0px;">
            <div style="width: 1130px; height: 717px; display: none; background-color: #FFFFFF; border: 1px solid #e2e2e2;" id="operaDiv">
                <!-- <pre>
                        </pre> -->
                <textarea id="xmlTxtAreaId" class="form-control" rows="50" style="width: 130%; height: 160%"></textarea>
            </div>
            <center>
                <canvas width="1100" height="507px" id="canvas" style="background-color: #FFFFFF; border: 0px solid #e2e2e2;">
                </canvas>
            </center>
        </div>
        <div style="clear: both"></div>
    </div>

</div>

<ul id="contextmenu" style="display: none;">
    <li>
        <a onclick="aclick('delete');">删除该节点</a>
    </li>
    <li>
        <a onclick="aclick('rename');">重命名</a>
    </li>
    <li>
        <a onclick="aclick('retry');">重做与安全凭证设置</a>
    </li>
</ul>

<div id="uploader" class="wu-example" style="position: absolute; left: -1000px; top: 50%; width: 400px; height: 200px; margin-left: -300px; margin-top: -200px; border: 1px solid rgb(136, 136, 136); background-color: rgb(238, 221, 255); text-align: center;">
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker" class="webuploader-container">
            <div class="webuploader-pick">选择文件</div>
            <div id="rt_rt_19qn9q6p017inchiq8cu7m18881" style="position: absolute; top: 0px; left: 0px; width: 88px; height: 34px; overflow: hidden; bottom: auto; right: auto;">
                <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" />
                <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"> </label>
            </div>
        </div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
        <button id="createFlowBtn" class="btn btn-default">生成流程</button>
        <input type="hidden" id="idTmpFile"></input>
    </div>
</div>

<textarea id="jtopo_textfield" onkeydown="if(event.keyCode==13)this.blur();" style="display: none; width: 60px; position: absolute; color: black;"></textarea>
<input type="hidden" th:value='${ooziePackageTemplate.packageId}' id="taskId" />
<input type="hidden" th:value='${ooziePackageTemplate.hadoopPlatform.id}' id="platformId" />
<input type="hidden" th:value='${ooziePackageTemplate.workflowJson}' id="flowjson" />
<input type="hidden" value='11' id="confCredential_name" />
<input type="hidden" th:value='${ooziePackageTemplate.hadoopTenant.yarnQueue}' id="jobQueue" />
<input type="hidden" th:value='${ooziePackageTemplate.hadoopPlatform.hiveJdbcUrl}' id="hiveJdbcUrl" />
<input type="hidden" th:value='${ooziePackageTemplate.hadoopTenant.tenant}' id="tenant" />
<input type="hidden" value='/user/atomic/oozie-app' id="hdfsBaseDir" />
<input type="hidden" th:value='${ooziePackageTemplate.nameCn}' id="taskName" />
<input type="hidden" th:value='${ooziePackageTemplate.nameEn}' id="taskNameEn" />
<!--右键菜单-->
<div id="rightmenu" style="display: none;"></div>
<input type="text" style="display: none;" value="" class="input-1c input-1c-6" id="buttype" />

<div id="retryDiv" style="display: none; width: 200px; position: absolute; color: black;">
    最大重做次数：
    <input type="number" min="0" max="10" value="0" id="retry_num" />
    <br /> 重做间隔：
    <input type="number" min="1" max="999" value="10" id="retry_int" />
    <br /> 安全凭证：
    <br />
    <div class="checkbox checkbox-primary">
        <input id="hive2CredBox" name="hive2CredBox" type="checkbox">
        <label for="hive2CredBox">
            Hive2
        </label>
    </div>
    <div class="checkbox checkbox-primary">
        <input id="hCatCredBox" name="hCatCredBox" type="checkbox">
        <label for="hCatCredBox">
            HCat
        </label>
    </div>
    <div class="checkbox checkbox-primary">
        <input id="hbaseCredBox" name="hbaseCredBox" type="checkbox">
        <label for="hbaseCredBox">
            Hbase
        </label>
    </div>
    <input type="hidden" value="" id="cred" />
    <br />
    <a class="btn-blue" onclick="retryOk();">确定</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn-blue" onclick="$('#retryDiv').hide();">取消</a>
</div>
<div th:include="include::footer"></div>

<script type="text/javascript" th:src="@{/js/plugins/oozie/sysLayout.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/oozie/accordion.js}"></script>
<script type="text/javascript" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/jtopo/jtopo_debug.js}"></script>

<!-- CodeMirror -->
<script th:src="@{/ajax/libs/codemirror/codemirror.js}"></script>
<script th:src="@{/ajax/libs/codemirror/mode/xml/xml.js}"></script>

<script type="text/javascript" th:src="@{/js/design/design.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/oozie/autocomplate.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/oozie/dialog.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/oozie/juicer-min.js}"></script>


</body>
</html>